import styled from '@emotion/styled';
import { Form, Select } from 'antd';
import { t } from 'i18next';
import React from 'react';

const FormSelectMultiple = styled(Select)`
	width: 100%;
	.ant-select-selector {
		height: 40px !important;
		background-color: #f6f6f6 !important;
	}
	.ant-select-selection-placeholder {
		line-height: 40px !important;
	}
	input {
		height: 40px !important;
	}
`;

interface GroupSkillSelectProps {
	list: { id: number; name: string }[];
	disable?: boolean;
	error?: string;
	name?: string;
	label?: string;
	placeholder?: string;
	changeGroupSkill: (value: any, options: any) => void;
}

const GroupSkillSelect = (props: GroupSkillSelectProps) => {
	const { list = [], changeGroupSkill, label = t('group-skill-transfer'), placeholder = t('select'), name, error = '', disable = false } = props;
	return (
		<>
			<Form.Item label={label} name={name} className="form-input-item">
				<FormSelectMultiple disabled={disable} mode="multiple" placeholder={placeholder} onChange={changeGroupSkill} showSearch={false} showArrow={true} bordered={false}>
					{list.map(item => {
						return (
							<Select.Option key={item.id} value={item.id}>
								{item.name}
							</Select.Option>
						);
					})}
				</FormSelectMultiple>
			</Form.Item>
			{error ? <p className="transfer-error">{error}</p> : undefined}
		</>
	);
};

export default GroupSkillSelect;
